<template>
    <div>
        <div class="clearfix_city linkage">
            <div class="province pickerWrapper">
                <mt-picker :slots="provinces" @change="onProvinceChange" ref="provincePicker"
                           value-key="label"/>
            </div>
            <div class="city pickerWrapper">
                <mt-picker :slots="citys" @change="onCityChange" ref="cityPicker"
                           value-key="label"/>
            </div>
            <div class="area pickerWrapper">
                <mt-picker :slots="areas" @change="onAreaChange" ref="areaPicker"
                           value-key="label"/>
            </div>
        </div>
        <div class="toolbar-bottom-right">
            <el-button type="primary" @click="_hideLinkage">确定</el-button>
            <el-button @click="_closeLinkage">取消</el-button>
        </div>
    </div>
</template>
<script lang="ts">
    import {cityJson} from "@/components/citySelect/cityData";
    import {mixins} from "vue-class-component";
    import BaseVue from "@/core/mixin/BaseVue";
    import Kit from "@/core/mixin/Kit";
    import {Component} from "vue-property-decorator";

    @Component({
        name: 'CitySelectPhone'
    })
    export default class CitySelectPhone extends mixins(BaseVue, Kit) {

        province: any = {
            label: '吉林省',
            value: '220000'
        };
        maskFlag: boolean = false;
        city: any = {
            label: '长春市',
            value: '220100'
        };
        area: any = {
            label: '高新区',
            value: '220102'
        };
        flag: number = 0;
        provinces: any = [
            {
                flex: 1,
                values: this._getProvince(),
                className: 'slot1',
                textAlign: 'center',
                defaultIndex: 6
            }, {
                divider: true,
                content: '-',
                className: 'right'
            }
        ];
        citys: any = [
            {
                flex: 1,
                values: this._getCity('吉林省'),
                className: 'slot1',
                textAlign: 'center'
            }, {
                divider: true,
                content: '-',
                className: 'slot2'
            }
        ];
        areas: any = [
            {
                flex: 1,
                values: this._getArea('吉林省', '长春市'),
                className: 'slot1',
                textAlign: 'center',
                defaultIndex: 1
            }
        ];
        result: any = [];

        mounted() {

        }

        // 确定
        _hideLinkage() {
            this.result = [];
            this.result.push(this.province.label);
            this.result.push(this.city.label);
            this.result.push(this.area.label);
            this.$emit('getLinkage', this.result); //触发父组件的getLinkage事件接收结果数据
        }

        // 取消
        _closeLinkage(){
            this.$emit('closeLinkage');
        }

        onProvinceChange(picker: any, values: any) {
            if (this.flag === 0) {
                return;
            }
            let provinceIndex = picker.getSlotValue(0);
            this.province = provinceIndex;
            let city: any = this._getCity(provinceIndex.label);
            this.citys[0].values = city;
            this.city = city[0];
        };

        onCityChange(picker: any, values: any) {
            if (this.flag === 0) {
                return;
            }
            let cityIndex = picker.getSlotValue(0);
            this.city = cityIndex;
            // 设置区初始值
            if (cityIndex.label == "长春市") {
                this.areas[0].defaultIndex = 1;
            } else {
                this.areas[0].defaultIndex = 0;
            }
            let provinceIndex = this.province;
            let area = this._getArea(provinceIndex.label, cityIndex.label);
            this.areas[0].values = area;
            this.area = area[0];
        };

        onAreaChange(picker: any, values: any) {
            if (this.flag === 0) {
                this.flag = 1;
                return;
            }
            let areaIndex = picker.getSlotValue(0);
            this.area = areaIndex;
        };

        //得到省份数据
        _getProvince() {
            return cityJson;
        };

        //根据省份得到城市数据
        _getCity(province: string) {
            for (let i in cityJson) {
                if (cityJson[i].label == province) {
                    return cityJson[i].children;
                }
            }
        };

        //根据城市和省份得到区域数据
        _getArea(province: string, city: string) {
            for (let i in cityJson) {
                if (cityJson[i].label == province) {
                    for (let j in cityJson[i].children) {
                        if ((cityJson[i].children as any)[j].label == city) {
                            return (cityJson[i].children as any)[j].children;
                        }
                    }
                }
            }
        }
    }
</script>
<style scoped>
    .mask {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 10;
    }

    .linkage {
        position: fixed;
        bottom: 50px;
        width: 100%;
        background: white;
        left: 0;
        overflow: hidden;
        z-index: 11;
    }

    .clearfix_city:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
    }

    .pickerWrapper {
        width: 33.3%;
        float: left;
    }
</style>
